<template>
	<view class="u-padding-30 order-page">
		<view class="payment-info">
			<view class="u-p-t-30 u-p-b-30 bold">订单信息</view>

			<view class="calculation-data">
				<view class="data-title">订单流水号</view>
				<view class="data-text">
					{{ payment.serial_code }}
				</view>
			</view>
			<view class="calculation-data" v-if="payment.state !== 'paid'">
				<view class="data-title">创建时间</view>
				<view class="data-text">{{ $u.timeFormat(payment.created, 'yyyy-mm-dd hh:MM:ss') }}</view>
			</view>
			<view class="calculation-data" v-if="payment.state === 'paid'">
				<view class="data-title">付款时间</view>
				<view class="data-text">{{ $u.timeFormat(payment.pay_complete_time, 'yyyy-mm-dd hh:MM:ss') }}</view>
			</view>
			<view class="calculation-data">
				<view class="data-title">订单状态</view>
				<view class="data-text">{{ stateDesc }}</view>
			</view>
		</view>

		<view class="goods-list">
			<view class="u-p-t-30 u-p-b-30 bold">订单信息</view>
			<template v-for="(item, index) in payment.goods_list">
				<view class="item-store" @click="openPage('/pages/stores/detail', { id: item.store_id })" v-if="item.store_id > 0 && item.shop_name">
					<u-icon name="home" style="margin-right: 0.5em"></u-icon>
					{{ item.shop_name }}
				</view>
				<view class="item">
					<view class="left">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="content u-flex-1">
						<view class="title u-line-2">
							<view v-if="item.is_gift" class="gift-tag">赠品</view>
							{{ item.item_name }}
						</view>
						<view class="type">{{ item.item_remark }}</view>
						<view class="type">{{ item.item_spec }}</view>
					</view>
					<view class="right">
						<view class="price" :class="{ 'line-through': item.is_gift === 1 }">￥{{ item.unit_price }}</view>
						<view class="number">x{{ item.quantity }}</view>
					</view>
				</view>
			</template>

			<!-- <u-gap height="40"></u-gap> -->

			<!-- <view class="calculation-data">
				<view class="data-title">商品总重</view>
				<view class="data-value">{{payment.total_weight}}g</view>
			</view> -->
			<view class="calculation-data" style="display: none">
				<view class="data-title">商品总价</view>
				<view class="data-value">￥ {{ payment.total_amount }}</view>
			</view>

			<view class="calculation-data" v-if="payment.service_fee > 0">
				<view class="data-title">运费</view>
				<view class="data-value" v-if="payment.service_fee > 0">￥ {{ payment.service_fee }}</view>
				<view class="data-value" v-else>商家包邮</view>
			</view>
			<view class="calculation-data" v-if="payment.points_discount > 0">
				<view class="data-title">积分抵扣</view>
				<view class="data-value" v-if="payment.addr_confirmed === 1">￥ {{ payment.points_discount }}</view>
				<view class="data-value" v-if="payment.addr_confirmed === 0">￥ {{ pointsDiscount }}</view>
			</view>
			<u-line />
			<view class="data-sum">
				<!-- 共节省 <text class="red">{{payment.discount_amount}}</text> 元； -->
				共 {{ payment.goods_list.length }} 件小计 ￥
				<text class="bold" v-if="payment.addr_confirmed === 1">{{ payment.pay_amount }}</text>
				<text class="bold" v-if="payment.addr_confirmed === 0">{{ parseFloat((payment.pay_amount - pointsDiscount).toFixed(2)) }}</text>
			</view>
		</view>

		<template v-if="payment.goods_list" v-for="(item, index) in payment.goods_list">
			<template v-if="item.vouchers && item.vouchers.length > 0" v-for="(voucher, index) in item.vouchers">
				<view class="delivery-info">
					<view class="u-p-t-30 u-p-b-30 bold">
						卡券信息
						<view style="display: inline-block; float: right">{{ voucherState(voucher.state) }}</view>
					</view>
					<view class="calculation-data">
						<view class="data-title">卡券名称</view>
						<view class="data-text">
							{{ voucher.voucher_name }}
						</view>
					</view>
					<view class="calculation-data">
						<view class="data-title">核销卡号</view>
						<view class="data-text">
							{{ voucher.voucher_code }}
						</view>
					</view>
					<view class="calculation-data">
						<view class="data-title">有效期</view>
						<view class="data-text">{{ $u.timeFormat(voucher.active_time, 'yyyy-mm-dd') }} ~ {{ $u.timeFormat(voucher.expire_time, 'yyyy-mm-dd') }}</view>
					</view>
					<view class="calculation-data" v-if="voucher.car_applicable">
						<view class="data-title">适用车型</view>
						<view class="data-text">{{ voucher.car_applicable }}</view>
					</view>
					<view class="calculation-data" v-if="voucher.reservation">
						<view class="data-title">预约说明</view>
						<view class="data-text">{{ voucher.reservation }}</view>
					</view>
					<view class="calculation-data" v-if="voucher.validity_tips">
						<view class="data-title">过期提示</view>
						<view class="data-text">{{ voucher.validity_tips }}</view>
					</view>
					<view class="calculation-data" v-if="voucher.remind">
						<view class="data-title">温馨提示</view>
						<view class="data-text">{{ voucher.remind }}</view>
					</view>
				</view>
			</template>
		</template>

		<view class="delivery-info" v-if="showConfirmInfo">
			<view class="u-p-t-30 u-p-b-30 bold">确认信息</view>

			<view class="calculation-data">
				<view class="data-title u-flex" style="align-items: baseline; padding-top: 8rpx">配送方式</view>
				<view class="data-text">
					<template v-if="payment.addr_confirmed == 0">
						<u-radio-group v-model="payment.delivery_type" :disabled="payment.addr_confirmed == 1" @change="radioGroupChange">
							<u-radio @change="radioChange" name="delivery">配送到家</u-radio>
							<!-- <u-radio @change="radioChange" name="pickup">到店自提</u-radio> -->
							<!-- <u-radio @change="radioChange" name="neednot">无需配送,我已收货</u-radio> -->
						</u-radio-group>
					</template>
					<template v-if="payment.addr_confirmed == 1">
						<view style="padding-top: 8rpx">
							<template v-if="payment.delivery_type === 'delivery'">配送到家</template>
							<template v-if="payment.delivery_type === 'pickup'">到店自提</template>
							<template v-if="payment.delivery_type === 'neednot'">无需配送</template>
						</view>
					</template>
				</view>
			</view>

			<view class="calculation-data" v-if="payment.delivery_type === 'delivery'">
				<view class="data-title">收货地址</view>
				<view class="data-text">
					<template v-if="payment.addr_confirmed == 1">
						<view>{{ payment.addr_name }} {{ payment.addr_phone }}</view>
						<view>{{ payment.addr_province }}{{ payment.addr_city }}{{ payment.addr_district }}{{ payment.addr_street }}</view>
					</template>
					<template v-if="payment.addr_confirmed == 0 && user.address && user.address.district && user.address.street">
						<view @click="openPage('/pages/ucp/address')">
							<view>{{ user.address.name }} {{ user.address.phone }}</view>
							<view v-if="user.address">{{ user.address.province }}{{ user.address.city }}{{ user.address.district }}{{ user.address.street }}</view>
						</view>
					</template>

					<template v-if="payment.addr_confirmed == 0 && (!user.address || !user.address.district || !user.address.street)">
						<view @click="openPage('/pages/ucp/address')">
							<u>
								请填写收货地址
								<u-icon name="arrow-right"></u-icon>
							</u>
						</view>
					</template>
				</view>
			</view>
			<template v-if="payment.delivery_type === 'pickup'">
				<view class="calculation-data">
					<view class="data-title">线下门店</view>
					<view class="data-text">
						<view @click="openPage('/pages/ucp/store-list')" style="text-decoration: underline">查看线下合作门店(通过提货码自提)</view>
					</view>
				</view>
				<view class="calculation-data" v-if="payment.pickup_code">
					<view class="data-title">提货码</view>
					<view class="data-text">
						<view>{{ payment.pickup_code }}</view>
					</view>
				</view>
			</template>
			<view class="calculation-data">
				<view class="data-title">备注</view>
				<view class="data-text">
					<template v-if="payment.addr_confirmed == 0">
						<view @click="showPaymentRemark = true">
							<u>
								<template>{{ payment.user_remark ? payment.user_remark : '请填写备注' }}</template>
								<u-icon name="edit-pen"></u-icon>
							</u>
						</view>
					</template>
				</view>
			</view>
			<view class="calculation-data" v-if="payment.delivery_type == 'delivery' && payment.delivery_company">
				<view class="data-title">配送信息</view>
				<view class="data-text">{{ payment.delivery_company }} {{ payment.delivery_trace_code }}</view>
			</view>
			<view class="calculation-data" v-if="payment.delivery_type === 'delivery' && payment.service_fee > 0">
				<view class="data-title">配送费</view>
				<view class="data-text">
					{{ payment.service_fee_details }}
					<view style="color: #f29100">{{ shop.delivery_introduction }}</view>
				</view>
			</view>
			<view class="calculation-data" v-if="user.points > 0 && payment.addr_confirmed === 0 && payment.max_points_deduction > 0">
				<view class="data-title">会员积分</view>
				<view class="data-text">
					{{ parseInt(user.points) }}
					<span style="color: #f29100">(本单可用{{ pointsValueYuan }}积分抵扣：{{ pointsValueYuan }}元)</span>
					<view class="data-text">
						<u-radio-group v-model="usePoints" :disabled="user.points <= 0">
							<u-radio name="use_point">使用积分</u-radio>
							<u-radio name="donot_use">不使用积分</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>

			<!-- <view class="calculation-data" style="margin-bottom: 30rpx;">
				<view class="data-text" style="display: flex;;align-items: center;"><img src="/static/images/confirm.png" style="height:28rpx;display: inline-block;margin-right:.5em;">已阅读并表示同意<view style="color:#F6390D;display:inline-block;" @click="openChelixin">《车力新用户协议》</view></view>
			</view> -->
			<view class="u-text-center u-p-t-30" v-if="payment.addr_confirmed == 0">
				<u-button class="custom-style" size="medium" @click="confirmAddr">提交订单</u-button>
			</view>
		</view>

		<view class="delivery-info" v-else="showConfirmInfo">
			<view class="calculation-data">
				<view class="data-title">备注</view>
				<view class="data-text">
					<template>
						<view @click="showPaymentRemark = true">
							<u>
								<template>{{ payment.user_remark ? payment.user_remark : '请填写备注' }}</template>
								<u-icon name="edit-pen"></u-icon>
							</u>
						</view>
					</template>
				</view>
			</view>
		</view>

		<view
			class="u-demo-wrap"
			v-if="payment.addr_confirmed == 1 && payment.state === 'pending_pay' && parseFloat(user.balance) >= payment.pay_amount && user.balance_activated === 'yes'"
		>
			<view class="u-demo-title">
				<text class="order-state u-font-lg u-p-r-10">账户可用余额：{{ user.balance }}</text>
			</view>
			<view class="u-demo-area btn-line">
				<u-button
					type="primary"
					:disabled="parseFloat(user.balance) < payment.pay_amount || user.balance_activated !== 'yes'"
					size="medium"
					plain
					shape="circle"
					@click="balancePay"
				>
					使用余额支付
				</u-button>
			</view>
		</view>

		<!-- <view class="u-demo-wrap" v-if="payment.addr_confirmed==1 && payment.state==='pending_pay'">
			<view class="u-demo-title">
				<text class="order-state u-font-lg u-p-r-10">订单金额：{{payment.pay_amount}}</text>
			</view>

			<view class="u-padding-10" style="font-weight: bold;font-size: 1.2em;">支付码</view>

			<view class="u-demo-area btn-line" style="padding-top:0;">
				<img src="/static/images/qr-pay-co.png" style="max-width: 100%;">
			</view>
			<u-line color="#5f6161" />
			<view class="u-p-t-30 tips">
				<text>长按支付码,即刻完成支付; <text style="color:#195ED7;">支付凭证记得截图保存哦</text>。</text>
			</view>
		</view> -->

		<view class="u-demo-wrap" v-if="payment.addr_confirmed == 1">
			<view class="u-demo-title" @click="openPage('/pages/ucp/order-log', { payment_id: payment.id })">
				<text class="order-state u-font-lg u-p-r-10">{{ stateDesc }}</text>
				<u-icon name="arrow-right" color="#5f6161" size="30"></u-icon>
			</view>

			<!-- <template v-if="payment.addr_confirmed==1 && payment.state==='pending_pay'">
				<view class="u-padding-10 welcome">请上传支付成功页面的截图</view>
				<view>
					<u-upload style="flex:1"  :action="action" :file-list="fileList" @on-success="uploadSuccess" max-count="1"></u-upload>
				</view>
				<view class="u-p-t-30 tips" style="text-align: center;">
					<text style="color:#F6390D;margin-left:.5em;" @click="showSample=true">点击查看截图示例</text>
				</view>
			</template> -->

			<!-- <u-modal v-model="showSample" confirm-text="知道了" title="支付结果截屏示例" :show-cancel-button="false" @confirm="showSample=false">
				<view class="u-update-content">
					<img src="/static/images/screenshot.jpeg" style="max-width: 100%;height: auto;"/>
				</view>
			</u-modal> -->

			<view class="u-demo-area btn-line">
				<u-button type="primary" size="medium" plain shape="circle" @click="openPage('/pages/index/store')">联系客服</u-button>
				<u-button type="success" size="medium" shape="circle" @click="showPayMethod = true" v-if="payment.state === 'pending_pay'" :disabled="payment.addr_confirmed == 0">
					立即支付
				</u-button>
				<!-- <u-button type="success" size="medium" shape="circle" @click="completePayment"
					v-if="payment.state==='pending_pay'" :disabled="payment.addr_confirmed==0">立即提交</u-button> -->
				<u-button v-if="payment.delivery_state === 'pending_receive'" type="primary" size="medium" plain shape="circle" @click="showConfirmReceived = true">
					确认收货
				</u-button>
			</view>

			<u-modal
				v-model="showConfirmReceived"
				@confirm="confirmReceived"
				content="点击确认前，请确认您已收到订单里全部实体商品."
				:show-cancel-button="true"
				:show-confirm-button="true"
				ref="uModal"
			></u-modal>

			<!-- <u-line color="#5f6161" />
			<view class="u-p-t-30 tips">
				<text>我们将在订单审核后为您开通订单</text>
			</view> -->
		</view>

		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<u-modal v-model="showWxNativePay" title="微信扫码支付" @confirm="getPayment" confirm-text="已完成支付">
			<view class="slot-content">
				<rich-text :nodes="wxNativePayQRCode"></rich-text>
			</view>
		</u-modal>
		<u-modal v-model="showPaymentRemark" title="填写订单备注" @confirm="modifyPaymentRemark" show-cancel-button confirm-text="确认信息">
			<view class="slot-content u-padding-30">
				<u-input v-model="payment_remark" type="textarea" :border="true" :height="100" :auto-height="true" />
			</view>
		</u-modal>
		<u-modal v-model="showPaySuccess" :title="payTitle" :title-style="{ color: 'red' }" confirm-text="立即前往申领" :content="payContent" @confirm="paySuccessBtn"></u-modal>
		<u-action-sheet :list="payMethods" v-model="showPayMethod" @click="clickPayMethod" :tips="tips" :cancel-btn="true"></u-action-sheet>
		<wx-share :title="shareTitle" :desc="shop.store_introduction" :imgUrl="user.avatar" :link="currentPage" ref="wxs"></wx-share>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showPaySuccess: false,
			payTitle: '恭喜您成为会员，获得产品大礼包',
			payContent: `多路片免费领1盒，节加净免费领3盒，白猫严选会员1年，请在【申领】页面领取`,
			goodsId: 14382,
			showSample: false,
			showConfirmReceived: false,
			currentPage: location.href,
			scrollTop: 0,
			showWxNativePay: false,
			showPaymentRemark: false,
			showCarInfo: false,
			wxNativePayQRCode: '',
			paymentId: '',
			payment: {
				goods_list: []
			},
			payment_remark: '',
			payMethods: [
				{
					text: '微信支付',
					color: 'green',
					fontSize: 28,
					subText: '直接使用微信付款',
					payMethod: 'wx-jsapi'
				}
				// {
				// 	text: '微信收款码',
				// 	color: 'green',
				// 	fontSize: 28,
				// 	subText: '扫码付款，可请朋友代付',
				// 	payMethod: 'wx-native'
				// }
				// {
				// 	text: '微信H5支付',
				// 	color: 'green',
				// 	fontSize: 28,
				// 	subText: '手机浏览器客户端H5网页支付',
				// 	payMethod: 'wx-mweb'
				// }
			],
			tips: {
				text: '选择支付方式',
				color: '#909399',
				fontSize: 24
			},
			showPayMethod: false,
			shop: {},
			user: {},
			usePoints: 'donot_use',
			action: this.$baseUrl + '/upload/image',
			fileList: [],
			paymentProof: ''
		};
	},
	computed: {
		shareTitle() {
			if (this.user.nickname) {
				return this.user.nickname + '的订单';
			}
			return '我的订单@' + this.shop.name;
		},
		pointsValueYuan() {
			var points = this.user.points;
			var yuan = parseInt(points);
			if (yuan >= this.payment.max_points_deduction) {
				yuan = this.payment.max_points_deduction;
			}
			return yuan;
		},
		pointsDiscount() {
			if (this.usePoints === 'use_point') {
				var points = this.user.points;
				var yuan = parseInt(points);
				if (yuan >= this.payment.max_points_deduction) {
					yuan = this.payment.max_points_deduction;
				}
				return yuan;
			}
			return 0;
		},
		stateDesc() {
			if (this.payment.state === 'pending_pay') {
				return '待支付';
			}
			if (this.payment.state === 'processing') {
				return '处理中';
			}
			if (this.payment.state === 'paid') {
				if (this.payment.delivery_state === 'complete') {
					return '订单已完成';
				}
				if (this.payment.delivery_state === 'store_handling') {
					return '商家捡货中';
				}
				if (this.payment.delivery_state === 'pending_receive') {
					return '商家配送中';
				}
				if (this.payment.delivery_state === 'pending_pickup') {
					return '待自提';
				}
				return '订单已支付';
			}
			if (this.payment.state === 'pending_refund') {
				return '订单退款处理中';
			}
			if (this.payment.state === 'refunded') {
				return '订单已退款';
			}
			if (this.payment.state === 'expired') {
				return '订单已失效';
			}
		},
		showConfirmInfo() {
			if (this.payment.goods_list && this.payment.goods_list.length > 0) {
				for (let i = 0; i < this.payment.goods_list.length; i++) {
					if (this.payment.goods_list[i].product_type === '实体商品') {
						return true;
					}
				}
			}
			return false;
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad(options) {
		this.getShop();
		if (options.id) {
			this.paymentId = options.id;
			this.getPayment();
		} else {
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
		// this.wxConfig();
	},
	onShow() {
		this.getUserInfo();
	},
	methods: {
		openChelixin() {
			if (this.shop.chelixin_article_id) {
				this.openPage('/pages/article/detail', { id: this.shop.chelixin_article_id });
			}
		},
		uploadSuccess(data, index, lists, name) {
			this.payment_proof = data.data.full_url;
		},
		confirmReceived() {
			this.$u
				.post('/shopping/confirm-received', {
					payment_id: this.paymentId
				})
				.then((res) => {
					this.getPayment();
				})
				.catch((e) => {});
		},
		voucherState(state) {
			switch (state) {
				case 'active':
					return '待使用';
				case 'expired':
					return '已过期';
				case 'void':
					return '已失效';
				case 'paid':
					return '已使用';
				default:
					return state;
			}
		},
		completePayment() {
			if (!this.payment_proof) {
				uni.showToast({
					title: '请上传支付成功页面截图作为支付凭证',
					icon: 'none',
					duration: 3000
				});
				return;
			}
			this.$u
				.post('/payment/call-pay', {
					payment_id: this.paymentId,
					pay_method: 'offline_qrcode',
					payment_proof: this.payment_proof
				})
				.then((res) => {
					this.getPayment();
					// console.log(res)
					// if (res.errocode===0) {
					// 	uni.showToast({
					// 		title: '提交成功，等待财务审核',
					// 		icon: none
					// 	})
					// } else {
					// 	uni.showToast({
					// 		title: res.msg,
					// 		icon: none
					// 	})
					// }
					// this.getPayment()
				})
				.catch((e) => {});
		},
		getPayment() {
			this.$u
				.post('/payment/payment-detail', {
					payment_id: this.paymentId
				})
				.then((res) => {
					this.payment = res;
					this.payment_remark = res.user_remark;
				})
				.catch((e) => {});
		},
		deliveryStateText(deliveryState) {
			if (deliveryState === 'uncertain') {
				return '不确定';
			}
			if (deliveryState === 'complete') {
				return '已完成';
			}
			if (deliveryState === 'store_handling') {
				return '商家配货中';
			}
			if (deliveryState === 'pending_receive') {
				return '待收货';
			}
			if (deliveryState === 'pending_pickup') {
				return '待自提';
			}
			return deliveryState;
		},
		deliveryTypeText(type) {
			if (type === 'delivery') {
				return '配送到家';
			}
			if (type === 'pickup') {
				return '门店自提';
			}
			if (type === 'neednot') {
				return '不需要发货';
			}
			return type;
		},
		modifyPaymentRemark() {
			this.$u
				.post('/payment/add-payment-remark', {
					payment_id: this.paymentId,
					remark: this.payment_remark
				})
				.then((res) => {
					this.getPayment();
				})
				.catch((e) => {});
		},
		confirmAddr() {
			if (
				this.payment.delivery_type === 'delivery' &&
				(!this.user.address ||
					!this.user.address.province ||
					!this.user.address.district ||
					!this.user.address.street ||
					!this.user.address.name ||
					!this.user.address.phone)
			) {
				uni.showToast({
					title: '请完善配送地址及收货人信息',
					icon: 'none',
					duration: 3000
				});
				return;
			}
			if (!this.user.address) {
				this.user.address = {};
			}
			this.$u
				.post('/payment/confirm-order-addr', {
					payment_id: this.payment.id,
					delivery_type: this.payment.delivery_type,
					addr_province: this.user.address.province,
					addr_city: this.user.address.city,
					addr_district: this.user.address.district,
					addr_street: this.user.address.street,
					addr_name: this.user.address.name,
					addr_phone: this.user.address.phone,
					use_points: this.usePoints
				})
				.then((res) => {
					this.getPayment();
				})
				.catch((e) => {});
		},
		openPage(jumpURL, params = {}) {
			console.log(jumpURL, params);
			this.$u.route({
				type: 'to',
				params: params,
				url: jumpURL,
				animationType: 'slide-in-bottom'
			});
		},
		clickPayMethod(index) {
			console.log(`点击了第${index + 1}项，内容为：${this.payMethods[index].text}`);
			switch (this.payMethods[index].payMethod) {
				case 'wx-jsapi':
					this.wxJsApiPay();
					break;
				case 'wx-native':
					this.wxNativePay();
					break;
				case 'wx-mweb':
					this.wxMWebPay();
				default:
			}
		},
		wxJsApiPay() {
			let that = this;
			this.$u
				.post('/payment/call-pay', {
					payment_id: this.paymentId,
					pay_method: 'wx-jsapi'
				})
				.then((res) => {
					function onBridgeReady() {
						WeixinJSBridge.invoke('getBrandWCPayRequest', res, function (res) {
							console.log(res);
							if (res.err_msg === 'get_brand_wcpay_request:ok' || res.errMsg === 'get_brand_wcpay_request:ok') {
								// 微信支付弹窗
								if (this.payment.goods_list[0].item_id === this.goodsId) {
									this.showPaySuccess = true;
								} else {
									uni.showToast({
										title: '支付成功',
										icon: 'success'
									});
								}
								that.getPayment();
							} else {
								if (res.errMsg) {
									uni.showToast({
										title: res.errMsg,
										icon: 'none',
										duration: 3000
									});
								}
								if (res.err_msg) {
									uni.showToast({
										title: res.err_msg,
										icon: 'none',
										duration: 3000
									});
								}
							}
						});
					}
					if (typeof WeixinJSBridge == 'undefined') {
						if (document.addEventListener) {
							document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
						} else if (document.attachEvent) {
							document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
							document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
						}
					} else {
						onBridgeReady();
					}
				});
		},
		paySuccessBtn() {
			uni.navigateTo({
				url: '/pages/buy/category'
			});
		},
		wxNativePay() {
			this.$u
				.post('/payment/call-pay', {
					payment_id: this.paymentId,
					pay_method: 'wx-native'
				})
				.then((res) => {
					console.log(res);
					if (res.code_url) {
						this.wxNativePayQRCode = `<div style="display:flex;align-items:center;justify-content:center;padding:15px;box-sizing:border-box;"><img src="${res.code_url}" style="max-width:100%;"/></div>`;
						this.showWxNativePay = true;
					} else {
						uni.showToast({
							title: res.msg,
							icon: none
						});
					}
				})
				.catch((e) => {});
		},
		wxMWebPay() {
			this.$u
				.post('/payment/call-pay', {
					payment_id: this.paymentId,
					pay_method: 'wx-mweb'
				})
				.then((res) => {
					console.log(res);
					if (res.redirect_url) {
						location.href = res.redirect_url;
					} else {
						uni.showToast({
							title: res.msg,
							icon: none
						});
					}
				})
				.catch((e) => {});
		},
		balancePay() {
			this.$u
				.post('/payment/call-pay', {
					payment_id: this.paymentId,
					pay_method: 'balance'
				})
				.then((res) => {
					console.log(res);
					this.getPayment();
				})
				.catch((e) => {});
		},
		getShop() {
			this.$u
				.post('/shopping/shop-setting', {})
				.then((res) => {
					this.goodsId = res.user_agreement_id;
					this.shop = res;
				})
				.catch((e) => {});
		},
		getUserInfo() {
			this.$u
				.post('/user/info', {})
				.then((res) => {
					this.user = res;
				})
				.catch((e) => {
					console.log(e);
				});
		},
		radioGroupChange(i) {
			console.log(i);
		},
		radioChange(i) {
			console.log(i);
			this.$u
				.post('/payment/modify-payment-addr', {
					payment_id: this.payment.id,
					delivery_type: i
				})
				.then((res) => {
					this.payment = res;
				})
				.catch((e) => {});
		}
	}
};
</script>

<style lang="scss">
.custom-style {
	color: #fff;
	background-color: #ff4544;
}
::v-deep .u-radio__icon-wrap {
	background-color: #ff4544 !important;
	border-color: #ff4544 !important;
}
.order-page {
	background-color: #f1f1f1;
}

.gift-tag {
	display: inline-block;
	background-color: red;
	color: #fff;
	border-radius: 4px;
	font-size: 0.8em;
	padding: 0 10rpx;
	line-height: 1.5;
	margin-right: 0.5em;
}
.line-through {
	text-decoration: line-through;
}

.u-demo-wrap {
	background-color: #fff;
	padding: 20px 10px;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 30rpx;

	.welcome {
		color: #848686;
	}

	.tips {
		width: 100%;
		color: #848686;
	}

	.order-state {
		font-weight: bold;
		margin-bottom: 14rpx;
	}

	.btn-line {
		display: flex;
		flex-direction: row;
		padding: 24rpx;
		box-sizing: border-box;
		// width: 100%;
	}

	.u-btn {
		margin: 0 10rpx;
	}
}

.goods-list {
	background-color: #fff;
	padding: 0 30rpx 30rpx 30rpx;
	border-radius: 10rpx;
	box-sizing: border-box;
	margin-bottom: 30rpx;

	.bold {
		font-weight: bold;
		border-bottom: 1rpx solid #c9c8d2;
	}

	.item-store {
		background: #000;
		color: #fec266;
		padding: 0 10px;
		box-sizing: border-box;
		border-radius: 10rpx;
		position: relative;
		border-bottom-left-radius: 0;
		margin-left: -20rpx;
		margin-right: -20rpx;
		margin-top: -2px;
		font-weight: bold;
		font-size: 24rpx;
		line-height: 1.8;
		margin-bottom: -10rpx;
		border-bottom-right-radius: 0;
		&::after {
			content: '';
			position: absolute;
			bottom: -20rpx;
			left: 0;
			width: 0;
			height: 0;
			border-bottom-left-radius: 5px;
			border-left: 20rpx solid #000;
			border-bottom: 20rpx solid transparent;
		}
	}

	.item {
		display: flex;
		margin: 30rpx 0;
		&:last-child {
			margin-bottom: 0;
		}

		.left {
			margin-right: 20rpx;

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 10rpx;
			}
		}

		.content {
			.title {
				font-size: 28rpx;
				font-weight: bold;
				line-height: 1.2em;
			}

			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: #555555;
			}

			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
		}

		.right {
			margin-left: 10rpx;
			// padding-top: 20rpx;
			text-align: right;

			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}

			.number {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}
		}
	}

	.calculation-data {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-top: 30rpx;

		.data-title {
			font-weight: bold;
		}
	}

	.u-line {
		margin-top: 30rpx !important;
	}

	.data-sum {
		padding-top: 30rpx;
		width: 100%;
		text-align: right;

		.red {
			color: red;
			padding-left: 10rpx;
			padding-right: 10rpx;
		}

		.bold {
			font-size: 36rpx;
		}
	}
}

.delivery-info {
	background-color: #fff;
	padding: 0 30rpx 30rpx 30rpx;
	border-radius: 10rpx;
	box-sizing: border-box;
	margin-bottom: 30rpx;

	.bold {
		font-weight: bold;
		border-bottom: 1rpx solid #c9c8d2;
	}

	.calculation-data {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-top: 30rpx;
		// margin-bottom: 10rpx;

		.data-title {
			width: 6em;
			font-weight: bold;
		}

		.data-text {
			flex: 1;
		}
	}
}

.payment-info {
	background-color: #fff;
	padding: 0 30rpx 30rpx 30rpx;
	border-radius: 10rpx;
	box-sizing: border-box;
	margin-bottom: 30rpx;

	.bold {
		font-weight: bold;
		border-bottom: 1rpx solid #c9c8d2;
	}

	.calculation-data {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-top: 30rpx;
		// margin-bottom: 10rpx;

		.data-title {
			width: 6em;
			font-weight: bold;
		}

		.data-text {
			flex: 1;
		}
	}
}
uni-button[disabled] {
	color: gray !important;
}
::v-deep .u-model__footer__button,
::v-deep .hairline-left {
	background-color: red !important;
	color: #fff !important;
}
</style>
